<!--
 * @Description: 首页
 * @Author: Ronda
 * @Date: 2021-08-10 13:23:06
 * @LastEditors: Jorven
 * @LastEditTime: 2022-05-15 09:06:03
-->
<template>
  <div>
    <!-- 基本渲染 -->
    <!-- {{ carouselData }} -->
    <!-- {{ categoryData }} -->
    <!-- {{ productData }} -->
    <!-- 首页背景 -->
    <div class="header">易洁家政</div>
    <!-- 轮播图 -->
    <div class="swipe-div">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in carouselData" :key="item.id">
          <!-- :src="item.url"   :是属性渲染 -->
          <img :src="item.url" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 产品分类数据 -->
    <div class="category-div">
      <!-- @click来绑定事件，这里实现了跳转路由并带参的操作 -->
      <van-grid :column-num="5" :gutter="10" :border="false">
        <van-grid-item
          @click="
            $router.push({
              path: 'product',
              query: { id: item.id },
            })
          "
          v-for="item in categoryData"
          :key="item.id"
          :icon="item.icon"
          :text="item.name"
        />
      </van-grid>
    </div>

    <!-- 产品数据 -->
    <div class="product-div">
      <van-row gutter="20">
        <van-col span="12" v-for="item in productData" :key="item.id">
          <!-- {{ item }} -->
          <div class="my-col">
            <img :src="item.photo" alt="" />
            <div class="title">{{ item.name }}</div>
            <div class="desc">{{ item.description }}</div>
          </div>
        </van-col>
      </van-row>
    </div>

    <!-- 首页 -->
    <!-- <button @click="$router.push('product')">跳转到服务产品页面</button> -->
    <!-- br代表空行 -->
    <br />
    <br />
    <br />
    <br />
  </div>
</template>
<script>
// 导入
import {
  queryCarousel,
  pageQueryProductCategory,
  pageQueryProduct,
} from "@/api/index.js";
export default {
  // 数据模型
  data() {
    return {
      // 数据存储的地方
      // 轮播图的数据
      carouselData: [],
      // 产品分类数据
      categoryData: [],
      // 产品数据
      productData: [],
    };
  },
  computed: {},
  // 方法
  methods: {
    // 加载轮播图的数据
    async loadCarousel() {
      let res = await queryCarousel();
      this.carouselData = res.data.data;
    },
    // 加载产品分类数据
    async loadCategory() {
      // pageQueryProductCategory方法的调用
      let res = await pageQueryProductCategory({ page: 1, pageSize: 5 });
      // console.log(res);
      this.categoryData = res.data.data.list;
    },
    // 加载产品数据
    async loadProduct() {
      let res = await pageQueryProduct({ page: 1, pageSize: 8 });
      // console.log(res);
      this.productData = res.data.data.list;
    },
  },
  // vue页面生命周期钩子函数，页面显示前，请求后台的数据
  created() {
    this.loadCarousel();
    this.loadCategory();
    this.loadProduct();
  },
  mounted() {},
};
</script>
<style scoped>
.header {
  /* div默认的宽是100%，整个屏幕的宽 */
  height: 135px;
  /* 渐变背景 */
  background-image: linear-gradient(to right, #7579ff, #bf73ff);
  /* 设置左下角的圆角边框 */
  border-bottom-left-radius: 30px;
  /* 设置右下角的圆角边框 */
  border-bottom-right-radius: 30px;
  /* 文字颜色 */
  color: white;
  /* 文字大小 */
  font-size: 28px;
  /* 文字对齐方式 */
  text-align: center;
  /* 文字行高 */
  line-height: 56px;
  /* 文字粗细 */
  font-weight: 900;
}

.swipe-div {
  width: 90%;
  /* div水平居中 */
  margin: 0 auto;
  /* 元素位置往上提 */
  margin-top: -80px;
}

/* 选择类为my-swipe的元素后代中的img标签 */
.my-swipe img {
  height: 150px;
  /* 100% 代表占满父元素宽度的比例 */
  width: 100%;
  /* 4个方向的圆角边框 */
  border-radius: 10px;
}
.product-div {
  /* 边框 */
  /* border: 1px solid red; */
  /* 设置内部元素距离父元素边框的距离 */
  padding: 20px;
}

.my-col {
  /* border: 1px solid #ddd; */
  /* 盒子阴影 */
  box-shadow: 0 0 3px #ddd;
  /* 元素外部设置距离 */
  margin: 10px 0;
  /* 元素内部元素往内收 */
  padding: 15px;
  border-radius: 5px;
}

.product-div img {
  width: 100%;
  height: 80px;
  /* 该元素水平居中 */
  /* margin: 0 auto; */
  /* 图片块级显示，跟div效果一样了 */
  /* display: block; */
}

.title {
  font-size: 20px;
  text-align: center;
}
.desc {
  font-size: 14px;
  text-align: center;
  color: #777;
}

/* div{} */
</style>